<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>my-form/src/Form.vue - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Outline.html">Outline</a></li><li><a href="Tag.html">Tag</a></li><li><a href="TagCanvas.html">TagCanvas</a></li></ul><h3>Modules</h3><ul><li><a href="module-$ui_components_my-affix.html">$ui/components/my-affix</a></li><li><a href="module-$ui_components_my-anchor.html">$ui/components/my-anchor</a></li><li><a href="module-$ui_components_my-autocomplete.html">$ui/components/my-autocomplete</a></li><li><a href="module-$ui_components_my-avatar.html">$ui/components/my-avatar</a></li><li><a href="module-$ui_components_my-avatars.html">$ui/components/my-avatars</a></li><li><a href="module-$ui_components_my-back-top.html">$ui/components/my-back-top</a></li><li><a href="module-$ui_components_my-capture.html">$ui/components/my-capture</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-capture.html#~_renderImg">_renderImg</a></li></ul></li><li><a href="module-$ui_components_my-card-list.html">$ui/components/my-card-list</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-card-list.html#~refresh">refresh</a></li></ul></li><li><a href="module-$ui_components_my-cascader.html">$ui/components/my-cascader</a></li><li><a href="module-$ui_components_my-checkbox.html">$ui/components/my-checkbox</a></li><li><a href="module-$ui_components_my-clipboard.html">$ui/components/my-clipboard</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-clipboard.html#~copy">copy</a></li></ul></li><li><a href="module-$ui_components_my-color-picker.html">$ui/components/my-color-picker</a></li><li><a href="module-$ui_components_my-contextmenu.html">$ui/components/my-contextmenu</a></li><li><a href="module-$ui_components_my-corner-mark.html">$ui/components/my-corner-mark</a></li><li><a href="module-$ui_components_my-crud.html">$ui/components/my-crud</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-crud.html#~openAddDialog">openAddDialog</a></li><li data-type='method'><a href="module-$ui_components_my-crud.html#~refresh">refresh</a></li><li data-type='method'><a href="module-$ui_components_my-crud.html#~reload">reload</a></li></ul></li><li><a href="module-$ui_components_my-date.html">$ui/components/my-date</a></li><li><a href="module-$ui_components_my-date-picker.html">$ui/components/my-date-picker</a></li><li><a href="module-$ui_components_my-description.html">$ui/components/my-description</a></li><li><a href="module-$ui_components_my-detail.html">$ui/components/my-detail</a></li><li><a href="module-$ui_components_my-detail-item.html">$ui/components/my-detail-item</a></li><li><a href="module-$ui_components_my-dialog.html">$ui/components/my-dialog</a></li><li><a href="module-$ui_components_my-drag.html">$ui/components/my-drag</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-drag.html#~getRelativeEl">getRelativeEl</a></li></ul></li><li><a href="module-$ui_components_my-drop.html">$ui/components/my-drop</a></li><li><a href="module-$ui_components_my-edit-tags.html">$ui/components/my-edit-tags</a></li><li><a href="module-$ui_components_my-editor.html">$ui/components/my-editor</a></li><li><a href="module-$ui_components_my-empty.html">$ui/components/my-empty</a></li><li><a href="module-$ui_components_my-filter.html">$ui/components/my-filter</a></li><li><a href="module-$ui_components_my-fixed.html">$ui/components/my-fixed</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-fixed.html#~resize">resize</a></li></ul></li><li><a href="module-$ui_components_my-flex.html">$ui/components/my-flex</a></li><li><a href="module-$ui_components_my-flex-item.html">$ui/components/my-flex-item</a></li><li><a href="module-$ui_components_my-flip.html">$ui/components/my-flip</a></li><li><a href="module-$ui_components_my-float.html">$ui/components/my-float</a></li><li><a href="module-$ui_components_my-float-item.html">$ui/components/my-float-item</a></li><li><a href="module-$ui_components_my-form.html">$ui/components/my-form</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-form.html#~reset">reset</a></li><li data-type='method'><a href="module-$ui_components_my-form.html#~submit">submit</a></li></ul></li><li><a href="module-$ui_components_my-form_src_Base.html">$ui/components/my-form/src/Base</a></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html">$ui/components/my-form/src/common/TagInput</a></li><li><a href="module-$ui_components_my-form_src_common_TagSelect.html">$ui/components/my-form/src/common/TagSelect</a></li><li><a href="module-$ui_components_my-form_src_common_TreeSelect.html">$ui/components/my-form/src/common/TreeSelect</a></li><li><a href="module-$ui_components_my-header.html">$ui/components/my-header</a></li><li><a href="module-$ui_components_my-highlight.html">$ui/components/my-highlight</a></li><li><a href="module-$ui_components_my-icon.html">$ui/components/my-icon</a></li><li><a href="module-$ui_components_my-im-wall.html">$ui/components/my-im-wall</a></li><li><a href="module-$ui_components_my-input.html">$ui/components/my-input</a></li><li><a href="module-$ui_components_my-input-number.html">$ui/components/my-input-number</a></li><li><a href="module-$ui_components_my-layout.html">$ui/components/my-layout</a></li><li><a href="module-$ui_components_my-lazy.html">$ui/components/my-lazy</a></li><li><a href="module-$ui_components_my-list.html">$ui/components/my-list</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-list.html#~load">load</a></li><li data-type='method'><a href="module-$ui_components_my-list.html#~refresh">refresh</a></li><li data-type='method'><a href="module-$ui_components_my-list.html#~reset">reset</a></li><li data-type='method'><a href="module-$ui_components_my-list.html#~scrollTop">scrollTop</a></li></ul></li><li><a href="module-$ui_components_my-location-picker.html">$ui/components/my-location-picker</a></li><li><a href="module-$ui_components_my-login.html">$ui/components/my-login</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-login.html#~submit">submit</a></li></ul></li><li><a href="module-$ui_components_my-marquee.html">$ui/components/my-marquee</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-marquee.html#~pause">pause</a></li><li data-type='method'><a href="module-$ui_components_my-marquee.html#~start">start</a></li><li data-type='method'><a href="module-$ui_components_my-marquee.html#~stop">stop</a></li></ul></li><li><a href="module-$ui_components_my-master-app.html">$ui/components/my-master-app</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-master-app.html#~initState">initState</a></li><li data-type='method'><a href="module-$ui_components_my-master-app.html#~onStateChange">onStateChange</a></li><li data-type='method'><a href="module-$ui_components_my-master-app.html#~onStateChange">onStateChange</a></li><li data-type='method'><a href="module-$ui_components_my-master-app.html#~setState">setState</a></li></ul></li><li><a href="module-$ui_components_my-menu.html">$ui/components/my-menu</a></li><li><a href="module-$ui_components_my-micro-app.html">$ui/components/my-micro-app</a></li><li><a href="module-$ui_components_my-navbar.html">$ui/components/my-navbar</a></li><li><a href="module-$ui_components_my-navbar-FullScreenAction.html">$ui/components/my-navbar-FullScreenAction</a></li><li><a href="module-$ui_components_my-navbar-IconAction.html">$ui/components/my-navbar-IconAction</a></li><li><a href="module-$ui_components_my-navbar-UserAction.html">$ui/components/my-navbar-UserAction</a></li><li><a href="module-$ui_components_my-number.html">$ui/components/my-number</a></li><li><a href="module-$ui_components_my-panel.html">$ui/components/my-panel</a></li><li><a href="module-$ui_components_my-paragraph.html">$ui/components/my-paragraph</a></li><li><a href="module-$ui_components_my-pro.html">$ui/components/my-pro</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-pro.html#~addTab">addTab</a></li><li data-type='method'><a href="module-$ui_components_my-pro.html#~closeTabs">closeTabs</a></li><li data-type='method'><a href="module-$ui_components_my-pro.html#~setTab">setTab</a></li></ul></li><li><a href="module-$ui_components_my-promise.html">$ui/components/my-promise</a></li><li><a href="module-$ui_components_my-radial-menu.html">$ui/components/my-radial-menu</a></li><li><a href="module-$ui_components_my-radio.html">$ui/components/my-radio</a></li><li><a href="module-$ui_components_my-range.html">$ui/components/my-range</a></li><li><a href="module-$ui_components_my-rate.html">$ui/components/my-rate</a></li><li><a href="module-$ui_components_my-resize.html">$ui/components/my-resize</a></li><li><a href="module-$ui_components_my-result.html">$ui/components/my-result</a></li><li><a href="module-$ui_components_my-revolve.html">$ui/components/my-revolve</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-revolve.html#~next">next</a></li><li data-type='method'><a href="module-$ui_components_my-revolve.html#~prev">prev</a></li><li data-type='method'><a href="module-$ui_components_my-revolve.html#~start">start</a></li><li data-type='method'><a href="module-$ui_components_my-revolve.html#~stop">stop</a></li></ul></li><li><a href="module-$ui_components_my-search-box.html">$ui/components/my-search-box</a></li><li><a href="module-$ui_components_my-select.html">$ui/components/my-select</a></li><li><a href="module-$ui_components_my-sidebar.html">$ui/components/my-sidebar</a></li><li><a href="module-$ui_components_my-skeleton.html">$ui/components/my-skeleton</a></li><li><a href="module-$ui_components_my-slider.html">$ui/components/my-slider</a></li><li><a href="module-$ui_components_my-sortable.html">$ui/components/my-sortable</a></li><li><a href="module-$ui_components_my-spin.html">$ui/components/my-spin</a></li><li><a href="module-$ui_components_my-stat-card.html">$ui/components/my-stat-card</a></li><li><a href="module-$ui_components_my-switch.html">$ui/components/my-switch</a></li><li><a href="module-$ui_components_my-table.html">$ui/components/my-table</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-table.html#~refresh">refresh</a></li></ul></li><li><a href="module-$ui_components_my-tabs.html">$ui/components/my-tabs</a></li><li><a href="module-$ui_components_my-tag-canvas.html">$ui/components/my-tag-canvas</a></li><li><a href="module-$ui_components_my-tag-input.html">$ui/components/my-tag-input</a></li><li><a href="module-$ui_components_my-tag-select.html">$ui/components/my-tag-select</a></li><li><a href="module-$ui_components_my-text.html">$ui/components/my-text</a></li><li><a href="module-$ui_components_my-timer.html">$ui/components/my-timer</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-timer.html#~reset">reset</a></li><li data-type='method'><a href="module-$ui_components_my-timer.html#~start">start</a></li><li data-type='method'><a href="module-$ui_components_my-timer.html#~stop">stop</a></li></ul></li><li><a href="module-$ui_components_my-title.html">$ui/components/my-title</a></li><li><a href="module-$ui_components_my-tree-select.html">$ui/components/my-tree-select</a></li><li><a href="module-$ui_components_my-typography.html">$ui/components/my-typography</a></li><li><a href="module-$ui_components_my-water-fall.html">$ui/components/my-water-fall</a></li><li><a href="module-$ui_components_my-watermark.html">$ui/components/my-watermark</a></li><li><a href="module-$ui_components_my-wave.html">$ui/components/my-wave</a></li><li><a href="module-$ui_components_my-wrapper.html">$ui/components/my-wrapper</a></li><li><a href="module-widgets_my-print.html">widgets/my-print</a></li></ul><h3>Events</h3><ul><li><a href="module-$ui_components_my-stat-card.html#~event:action">action</a></li><li></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html#~event:add">add</a></li><li><a href="module-$ui_components_my-wrapper.html#~event:back">back</a></li><li><a href="module-$ui_components_my-dialog.html#~event:cancel">cancel</a></li><li><a href="module-$ui_components_my-typography.html#~event:change">change</a></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-radial-menu.html#~event:click">click</a></li><li></li><li></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-avatars.html#~event:click-add">click-add</a></li><li><a href="module-$ui_components_my-avatars.html#~event:click-item">click-item</a></li><li><a href="module-$ui_components_my-avatars.html#~event:click-more">click-more</a></li><li><a href="module-$ui_components_my-radial-menu.html#~event:close">close</a></li><li></li><li><a href="module-$ui_components_my-pro.html#~event:collapse">collapse</a></li><li><a href="module-$ui_components_my-form_src_common_TagSelect.html#~event:collapsed">collapsed</a></li><li><a href="module-$ui_components_my-table.html#~event:column-change">column-change</a></li><li><a href="module-$ui_components_my-navbar-UserAction.html#~event:command">command</a></li><li></li><li></li><li><a href="global.html#event:complete">complete</a></li><li></li><li><a href="module-$ui_components_my-typography.html#event:copy">copy</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-drag.html#~event:drag">drag</a></li><li></li><li><a href="module-$ui_components_my-dialog.html#~event:drag-start">drag-start</a></li><li><a href="module-$ui_components_my-dialog.html#~event:drag-stop">drag-stop</a></li><li><a href="module-$ui_components_my-drop.html#~event:drop">drop</a></li><li><a href="module-$ui_components_my-typography.html#event:edited">edited</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-typography.html#event:editing">editing</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-drop.html#~event:enter">enter</a></li><li><a href="module-$ui_components_my-table.html#~event:error">error</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-typography.html#event:expand">expand</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-timer.html#~event:finish">finish</a></li><li><a href="module-$ui_components_my-dialog.html#~event:hide">hide</a></li><li><a href="module-$ui_components_my-lazy.html#~event:init">init</a></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html#~event:input-change">input-change</a></li><li><a href="module-$ui_components_my-drop.html#~event:leave">leave</a></li><li><a href="module-$ui_components_my-wrapper.html#~event:link-click">link-click</a></li><li><a href="module-$ui_components_my-dialog.html#~event:load">load</a></li><li><a href="module-$ui_components_my-revolve.html#~event:loaded">loaded</a></li><li><a href="module-$ui_components_my-dialog.html#~event:maximize">maximize</a></li><li><a href="module-$ui_components_my-im-wall.html#~event:on-added">on-added</a></li><li><a href="module-$ui_components_my-capture.html#~event:on-capture">on-capture</a></li><li><a href="global.html#event:on-change">on-change</a></li><li><a href="module-$ui_components_my-tag-canvas.html#~event:on-click">on-click</a></li><li><a href="module-$ui_components_my-capture.html#~event:on-output">on-output</a></li><li><a href="module-$ui_components_my-radial-menu.html#~event:open">open</a></li><li></li><li><a href="module-$ui_components_my-drop.html#~event:over">over</a></li><li><a href="global.html#~event:page-change">page-change</a></li><li></li><li></li><li><a href="module-$ui_components_my-login.html#~event:pki">pki</a></li><li><a href="module-$ui_components_my-revolve.html#~event:progress">progress</a></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html#~event:remove">remove</a></li><li><a href="module-$ui_components_my-timer.html#~event:reset">reset</a></li><li></li><li><a href="module-$ui_components_my-resize.html#~event:resize">resize</a></li><li></li><li><a href="module-$ui_components_my-dialog.html#~event:resize-start">resize-start</a></li><li><a href="module-$ui_components_my-dialog.html#~event:resize-stop">resize-stop</a></li><li><a href="module-$ui_components_my-search-box.html#~event:search">search</a></li><li><a href="module-$ui_components_my-sidebar.html#~event:select">select</a></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-dialog.html#~event:show">show</a></li><li><a href="global.html#~event:size-change">size-change</a></li><li></li><li></li><li><a href="module-$ui_components_my-timer.html#~event:start">start</a></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-timer.html#~event:stop">stop</a></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-login.html#~event:submit">submit</a></li><li></li><li></li><li><a href="module-$ui_components_my-table.html#~event:success">success</a></li><li></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-panel.html#~event:tab-change">tab-change</a></li><li><a href="module-$ui_components_my-pro.html#~event:tab-remove">tab-remove</a></li><li><a href="module-$ui_components_my-pro.html#~event:tab-select">tab-select</a></li><li><a href="module-$ui_components_my-timer.html#~event:tick">tick</a></li><li><a href="module-$ui_components_my-form.html#~event:validate">validate</a></li><li><a href="module-widgets_my-back-top.html#event:click">click</a></li></ul><h3>Global</h3><ul><li><a href="global.html#AddShadowToImage">AddShadowToImage</a></li><li><a href="global.html#appendChildNode">appendChildNode</a></li><li><a href="global.html#createEllipsisContainer">createEllipsisContainer</a></li><li><a href="global.html#createEllipsisContentHolder">createEllipsisContentHolder</a></li><li><a href="global.html#destroyVue">destroyVue</a></li><li><a href="global.html#getData">getData</a></li><li><a href="global.html#inRange">inRange</a></li><li><a href="global.html#instanceVue">instanceVue</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#pxToNumber">pxToNumber</a></li><li><a href="global.html#removeEllipsisContainer">removeEllipsisContainer</a></li><li><a href="global.html#RoundImage">RoundImage</a></li><li><a href="global.html#scrollTop">scrollTop</a></li><li><a href="global.html#setData">setData</a></li><li><a href="global.html#styleToString">styleToString</a></li><li><a href="global.html#wrapperDecorations">wrapperDecorations</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">my-form/src/Form.vue</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;Form class="my-form"
        ref="elForm"
        v-bind="$attrs"
        v-on="$listeners"
        @keyup.native.enter="submit"
        :model="currentModel">
    &lt;slot>&lt;/slot>
    &lt;FormItem label=" " v-if="footer" class="my-form__footer" :class="footerClass">
      &lt;slot name="footer">
        &lt;Button v-if="submitText"
                type="primary"
                @click="submit"
                :loading="prevent &amp;&amp; submitting">{{(prevent &amp;&amp; submitting) ? submittingText : submitText}}
        &lt;/Button>
        &lt;Button v-if="resetText" :disabled="prevent &amp;&amp; submitting" type="default" @click="reset">{{resetText}}&lt;/Button>
        &lt;slot name="actions">&lt;/slot>
        &lt;Button v-if="collapsible"
                :disabled="prevent &amp;&amp; submitting"
                type="text"
                @click="toggleCollapsed"
                class="my-form__collapse">
         &lt;span>
           {{currentCollapsed ? '展开': '收起'}}
           &lt;i
             :class="currentCollapsed ? 'el-icon-arrow-down' : 'el-icon-arrow-up'">&lt;/i>
           &lt;/span>
        &lt;/Button>
      &lt;/slot>

    &lt;/FormItem>
  &lt;/Form>
&lt;/template>

&lt;script>
  /**
   * 表单组件
   * @module $ui/components/my-form
   */
  import {Form, FormItem, Button} from 'element-ui'
  import {cloneDeep, isEqual} from '$ui/utils/util'

  // const _set = require('lodash/set')

  /**
   * 插槽
   * @member slots
   * @property {string} default 默认插槽，放置表单项
   * @property {string} actions 追加底部操作按钮
   * @property {string} footer重新定义整个底部内容，设置后，自带的提交、重置、收起/展开功能将失效
   */
  export default {
    name: 'MyForm',
    components: {
      Form,
      FormItem,
      Button
    },
    provide() {
      return {
        myForm: this
      }
    },
    /**
     * 属性参数
     * @member props
     * @property {Object} [model] 表单初始化数据模型，需要设置表单默认值或回填表单时使用
     * @property {string} [itemWidth] 表单项的宽度，默认自适应，支持任何css宽度设置
     * @property {boolean} [footer=true] 显示底部功能，设置false，自带的提交、重置、收起/展开功能将失效
     * @property {string} [footerAlign] 底部对齐方式，可选值：'left', 'right', 'center'
     * @property {String|Boolean} [submitText=提交] 提交按钮文本，false 时不显示提交按钮
     * @property {String} [submittingText=正在提交数据...] 正在提交时按钮文本, 需要设置 prevent=true 时才有效
     * @property {Function} [onSubmit] 提交表单回调函数，必须要返回Promise
     * @property {string} [resetText] 重置按钮文本，false 时不显示
     * @property {Boolean} [resetSubmitSuccess=false] 提交数据成功后，重置表单
     * @property {Boolean} [collapsible] 支持表单项展开、收起
     * @property {boolean} [collapsed=true] 初始收起表单项目，collapsible=true是才有效
     * @property {string} [collapseEffect] 展开、收起动画效果，transition 组件的 name属性
     * @property {boolean} [resetCollapsed] 收起时重置折叠的表单项
     * @property {boolean} [footerBlock] 底部另起一行显示
     * @property {boolean} [footerExpandBlock=true] 展开后底部另起一行显示,
     * @property {boolean} [footerFloat=false] 底部浮动右边，常在做筛选条件是使用
     * @property {Function} [loader] 加载数据函数, 必须返回Promise, 注意：如定义loader，所有表单项目都会回调，函数需要自己实现处理逻辑
     * @property {Object} [dictMap] 字典数据集合, 格式：{字典类型编码：字典列表}
     * @property {boolean} [prevent=true] 防止重复提交
     */

    /**
     * 继承 el-form事件， 任一表单项被校验后触发
     * @event validate
     * @param {*} value 被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）
     */

    props: {
      // 表单模型数据
      model: Object,
      // 表单项的宽度，默认自适应
      itemWidth: String,
      // 显示底部
      footer: {
        type: Boolean,
        default: true
      },
      // 底部对齐方式
      footerAlign: {
        type: String,
        validator(val) {
          return ['', 'left', 'right', 'center'].includes(val)
        }
      },
      // 提交按钮文本，false 时不显示
      submitText: {
        type: [String, Boolean],
        default: '提交'
      },
      // 正在提交时按钮文本
      submittingText: {
        type: String,
        default: '正在提交数据...'
      },
      // 提交表单时回调函数，必须要返回Promise
      onSubmit: {
        type: Function
      },
      // 重置按钮文本，false 时不显示
      resetText: {
        type: [String, Boolean],
        default: '重置'
      },
      // 提交数据成功后，重置表单
      resetSubmitSuccess: Boolean,

      // 可折叠
      collapsible: Boolean,

      // 默认收起
      collapsed: {
        type: Boolean,
        default: true
      },
      // 折叠动画效果，transition 组件的 name属性
      collapseEffect: String,

      // 收起时重置表单项
      resetCollapsed: Boolean,

      // 底部另起一行显示
      footerBlock: Boolean,

      // 展开后底部另起一行显示
      footerExpandBlock: {
        type: Boolean,
        default: true
      },
      // 底部浮动右边，常在做筛选条件是使用
      footerFloat: Boolean,
      // 加载数据函数, 必须返回Promise, 注意：如在表单定义loader，所有表单项目都会回调，函数需要自己实现处理逻辑
      loader: Function,

      // 字典数据集合
      dictMap: Object,

      // 防止重复提交
      prevent: {
        type: Boolean,
        default: true
      }
    },
    data() {
      // 子表单项实例集合
      this.items = {}
      return {
        currentModel: {},
        // 正在提交
        submitting: false,
        // 当前的折叠状态
        currentCollapsed: true
      }
    },
    computed: {
      footerClass() {
        return {
          [`is-align-${this.footerAlign}`]: !!this.footerAlign,
          'is-block': this.footerBlock || (!this.currentCollapsed &amp;&amp; this.footerExpandBlock),
          'is-float-right': this.footerFloat
        }
      }
    },
    watch: {
      model: {
        immediate: true,
        deep: true,
        handler(val) {
          // 如果两者相等，不修改，避免死循环
          if (!isEqual(val, this.currentModel)) {
            this.currentModel = cloneDeep(val || {})
          }
        }
      },
      collapsed: {
        immediate: true,
        handler(val) {
          this.currentCollapsed = val
        }
      },
      currentModel: {
        deep: true,
        handler(val) {
          // if (isEqual(val, old)) return
          /**
           * 表单值改变时触发
           * @event change
           * @param {Object} model 表单模型数据
           */
          this.triggerChange(val)
        }
      },
      dictMap(val) {
        if (!val) return
        Object.keys(this.items).forEach(name => {
          const vm = this.items[name]
          const {dict, loader, options} = vm
          // 如果子组件没有设置 options 和 loader, 但有设置字典名称，用表单的字典数据填充到子组件
          if (!options &amp;&amp; !loader &amp;&amp; dict) {
            vm.currentOptions = val[dict] || []
          }

        })
      }
    },
    methods: {
      /**
       * 提交表单
       * @method submit
       */
      submit() {
        this.$refs.elForm.validate(valid => {
          if (valid) {
            const model = cloneDeep(this.currentModel)
            if (this.onSubmit) {
              this.submitting = true
              this.onSubmit(model, this)
                .then(() => {
                  // 提交表单成功后，重置
                  this.resetSubmitSuccess &amp;&amp; this.reset()
                })
                .finally(() => {
                  this.submitting = false
                })
            }
            /**
             * 表单提交时触发
             * @event submit
             * @param {object} model 表单模型数据
             * @param {VueComponent} vm 表单实例
             */
            this.$emit('submit', model, this)
          }
        })
      },
      /**
       * 重置表单
       * @method reset
       */
      reset() {
        this.currentModel = cloneDeep(this.getDefaultValue())
        this.$nextTick(() => {
          this.$refs.elForm &amp;&amp; this.$refs.elForm.clearValidate()
          /**
           * 重置表单时触发
           * @event reset
           * @param {VueComponent} vm 表单实例
           */
          this.$emit('reset', this)
        })
      },
      toggleCollapsed() {
        this.currentCollapsed = !this.currentCollapsed
        this.$emit('collapse', this.currentCollapsed, this)
      },
      addItem(vm) {
        const {name} = vm
        if (!name) return
        if (name in this.items) {
          throw new Error(`表单中的项中 name：${name} 重复，请确保在同一个表单中保持唯一`)
        }
        this.items[name] = vm
      },
      removeItem(vm) {
        if (!vm.name) return
        delete this.items[vm.name]
      },
      getDefaultValue() {
        // const values = {}
        // Object.entries(this.items).forEach(([name, item]) => {
        //   values[name] = item.getDefaultValue()
        //   // _set(values, name, item.getDefaultValue())
        // })
        // return {...values, ...(this.model || {})}
        return cloneDeep(this.model || {})
      },
      triggerChange(val) {
        clearTimeout(this.changeTimer)
        this.changeTimer = setTimeout(() => {
          /**
           * 表单值改变时触发
           * @event change
           * @param {Object} model 表单模型数据
           */
          this.$emit('change', cloneDeep(val))
        }, 100)

      }
    }
  }
&lt;/script>
</code></pre>
        </article>
    </section>





    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> on Wed Nov 18 2020 13:00:34 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
